<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/login.css"/>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<title>登录</title>
<script>
    function pankong(){
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  if (username.match(/^[a-zA-Z0-9]{6,20}$/)==null) {
   alert("用户名长度需为6-20个字符");
  }else if(password.match(/^[a-zA-Z0-9]{5,15}$/)==null){
   alert("密码长度需为5-15个字符");
  }
 }
</script>  
    <style>
        body{
    background:url('22222.jpg');
    background-repeat:no-repeat;
    background-size:100% auto;
}
#login-box{
    width:30%;
    height:auto;
    margin:0 auto ;
    margin-top:13%;
    text-align:center;
    background:#00000060;
    padding:20px 50px;
    }
#login-box h1{
    color:#fff;
}
#login-box .form .item{
    margin-top:15px;
}
#login-box .form .item i{
    font-size:18px;
    color:#fff;
}
#login-box .form .item input{
    width:180px;
    font-size:18px;
    border:0;
    border-bottom:2px solid #fff;
    padding:5px 10px;
    background:#ffffff00;
    color:#fff;
}
#login-box 	button{
    margin-top:20px;
    width:190px;
    height:30px;
    font-size:20px;
    font-weight:700;
    color:#fff;
    background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
    border:0;
    border-radius:15px;
}

    </style>
</head>
<body>
    <form class="form-signin" name=a  action="admin.html" method="POST">
	<div id="login-box">
		<h1>超市订单管理系统</h1>
		<div class="form">
			<div class="item">
			   <i class="fa fa-github-alt" style="font-size:24px"></i>
			   <input type="text"  name="username" id="username" placeholder="用户名" required autofocus>		   
			</div>
			<div class="item">
			   <i class="fa fa-search" style="font-size:24px"></i>
			   <input type="password"  name="password" class="form-control" id="password" placeholder="密码" required>		   
			</div>
		</div>   
		<button class="btn btn-lg btn-primary btn-block" type="submit" onclick=" return pankong()">登录</button>
    </div>
</form>
</body>
</html>
